<template>
    <div>
        <el-drawer :size="config.size" :title="title" :visible.sync="config.drawer" :direction="config.direction"
            :before-close="handleClose">
            <el-form label-width="90px" :model="form" ref="form" :rules="rules">
                <!-- <slot></slot> -->

                <el-form-item v-for="(item, index) in formColumn" :key="index" :label="item.label" :prop="item.prop">
                    <el-input v-if="item.type == 'Input'" :type="item.inputType" v-model="form[item.prop]"
                        :placeholder="item.placeholder" clearable :style="{ width: item.width }"></el-input>

                    <el-input v-if="item.type == 'Textarea'" :type="item.inputType" :autosize="item.autosize"
                        v-model="form[item.prop]" :placeholder="item.placeholder" clearable
                        :style="{ width: item.width }"></el-input>

                    <el-select
                        v-if="item.type == 'Select' && item.prop == 'sex' || item.prop == 'role' || item.prop == 'status'"
                        v-model="form[item.prop]" :placeholder="item.placeholder" clearable
                        :style="{ width: item.width }">
                        <el-option v-for="(optionItem, optionIndex) in item.optionLabel" :key="optionIndex"
                            :label="optionItem.label" :value="optionItem.value"></el-option>
                    </el-select>
                    <el-select v-if="item.type == 'Select' && item.prop == 'politicalStatus' && oldStatus"
                        v-model="form[item.prop]" :placeholder="item.placeholder" clearable
                        :style="{ width: item.width }">
                        <el-option v-for="(optionItem, optionIndex) in oldStatus" :key="optionIndex"
                            :label="optionItem.statusName" :value="optionItem.id"></el-option>
                    </el-select>
                    <el-select v-if="item.type == 'Select' && item.prop == 'activityTypeName' && activityType"
                        v-model="form[item.prop]" :placeholder="item.placeholder" clearable
                        :style="{ width: item.width }">
                        <el-option v-for="(optionItem, optionIndex) in activityType" :key="optionIndex"
                            :label="optionItem.name" :value="optionItem.id"></el-option>
                    </el-select>
                    <el-select v-if="item.type == 'Select' && item.prop == 'infoTypeId' && infoType"
                        v-model="form[item.prop]" :placeholder="item.placeholder" clearable
                        :style="{ width: item.width }">
                        <el-option v-for="(optionItem, optionIndex) in infoType" :key="optionIndex"
                            :label="optionItem.name" :value="optionItem.id"></el-option>
                    </el-select>
                    <el-upload v-if="item.type == 'upload'" :label="item.label" :style="{ width: item.width }"
                        class="avatar-uploader" :headers="{ Authorization: token }" name="file"
                        action="http://localhost:8080/admin/upload" :show-file-list="false" :on-success="uploadSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <el-date-picker :picker-options="pickerOptions" v-if="item.type == 'Date'" v-model="form[item.prop]"
                        type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="button-box">
                <el-button :loading="loading" style="margin-right: 20px;" @click="submit" type="primary">提交</el-button>
                <el-button style="margin-left: 20px;" @click="handleClose" type="info">取消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>

export default {
    name: "DrawerComponent",
    props: {
        title: {
            type: String,
            default: '抽屉组件'
        },
        config: {
            type: Object,
            default: () => { }
        },
        formColumn: {
            type: Array,
            default: () => []
        },
        form: {
            type: Object,
            default: () => { }
        },
        rules: {
            type: Object,
            default: () => { }
        },
        oldStatus: {
            type: Array,
            default: () => [],
        },
        activityType: {
            type: Array,
            default: () => [],
        },
        infoType: {
            type: Array,
            default: () => [],
        },
        token: {
            type: String,
            default: "Bearer " +  localStorage.getItem('edb-authorization-token'),
        },
        imageUrl: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            loading: false,
            // 设置当前时间之前不能选择
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            // imageUrl: '',
        };
    },
    created() {
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                    // this.$refs['form'].resetFields(); // 重置表单数据
                    this.imageUrl = ''
                    this.form = {};
                    this.$emit('handleClose');
                })
                .catch(() => { });
            console.log('抽屉组件关闭了');
        },

        submit() {
            console.log(this.form);

            this.loading = true;
            this.form.img = this.imageUrl;
            setTimeout(() => {
                this.$emit('drawerSubmit', this.form);
                this.loading = false;
                this.imageUrl = '';
                this.form = {};
            }, 1000);

            // this.$refs['form'].resetFields(); // 重置表单数据
        },

        uploadSuccess(response) {
            console.log('response-->', response);
            this.imageUrl = response.data;
        },
    },
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button-box {
    text-align: center;
}
</style>